<template>
  <!-- 录入新单 -->
  <div class="box">
    <section class="section_one">
      <div class="title_sub prduct_bod_r">产品说明：</div>
      <ProductDescription></ProductDescription>
    </section>
    <section class="section_two">
      <div class="title_sub infro_bod_l">信息录入：</div>
      <!-- <Information ref="Information"></Information> -->
      <Information
        ref="Information"
        v-if="template === 'template_01'"
      ></Information>
      <Information2
        ref="Information"
        v-if="template === 'template_02'"
      ></Information2>
    </section>
    <section class="section_three">
      <div class="title_sub upload_bod_l">附件管理：</div>
      <!-- 上传组件 -->
      <Upload class="uploadStyle" ref="Uploade" :isNew="isNew"></Upload>
    </section>
    <el-button class="tijiao" type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script>
import "@/assets/js/validation";
import ProductDescription from "../../components/business/ProductDescription";
import Upload from "../../components/business/Upload";
import Information from "../../components/business/Information";
import Information2 from "../../components/business/Information2";

import { getFindOneList } from "../../assets/js/api";

export default {
  name: "NewSingleEntry",
  components: {
    Information,
    ProductDescription,
    Upload,
    Information2
  },
  created() {
    //产品ID
    this.productId = parseInt(sessionStorage.getItem("productId"));
    this.ProductUrl = this.$route.query.path;
    this.getOrderOne(this.productId);
  },
  data() {
    return {
      isNew: true,
      productId: null,
      registerUrl: "/channel/order/submit",
      ProductUrl: "",
      template: ""
    };
  },
  methods: {
    //确定提交按钮
   async submit() {
      let thisObj = this;
      let bStop = true;
      let orderNumber = this.$refs.Uploade.orderNumber;
      let formData = this.$refs.Information.form;
      //获取产品Id
      let productId = parseInt(sessionStorage.getItem("productId"));
      //带上订单号跟产品ID
      formData.productId = productId;
      formData.orderNumber = orderNumber;
      bStop = await this.checkForm();
      if (bStop) {
        let that = this;
        this.axios
          .post(this.registerUrl, formData, {
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            }
          })
          .then(function(res) {
            if (res.data.code == 200) {
              that.$message({
                message: res.data.message,
                type: "success"
              });
              thisObj.$router.replace({
                path: `/Index/ValueAdded/${productId}`,
                query: { orderNumber: orderNumber, path: thisObj.ProductUrl }
              });
            }
          })
          .catch(function(error) {
            that.$message({
              message: error.message,
              type: "error"
            });
          });
        Information.orderNumber = orderNumber;
      }
    },
    //验证格式
    async checkForm() {
      //子组件的表格
      let isValid = await this.$refs.Information.validateForm();
      if (!isValid) {
        this.$message({
          message: "请完成基础信息的非空填写",
          type: "error"
        });
        return false;
      }
      //上传的图片
      let uploadImg = this.$refs.Uploade.fileList;
      if (!uploadImg.length >= 1) {
        this.$message({
          message: "请上传证件照",
          type: "error"
        });
        return false;
      }
      return true;
    },

    getOrderOne(id) {
      getFindOneList(id).then((res) => {
        this.template = res.data.dynamicCode;
      });
    }
  }
}
;
</script>

<style scoped type="less">
.text {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  margin-top: 20px;
  text-indent: 2em;
}

.uploadStyle {
  position: relative;
  margin-top: 20px;
}

.tijiao {
  margin-right: 20px;
  margin-bottom: 40px;
  width: 120px;
  height: 40px;
}
</style>
